<template>
  <div class="home_bg">
    <div class="home_bg_image">
      <img src="../../assets/images/bg.png" alt="">
    </div>
    <div class="bg_mark"></div>
    <div class="login">
      <div class="login_top">
        <span>返回首页</span>
        <span @click="accountNo">{{ comName == 'Login' ? '没有账号?去注册' : '已有账号?去登录'  }}</span>
      </div>
      <component :is="comName"></component>
    </div>
  </div>
</template>

<script>
import Login from '@/components/Login.vue'
import Registered from '@/components/Registered'
export default {
  components: {
    Login,
    Registered
  },
  data () {
    return {
      comName: 'Login'
    }
  },
  created () {
    if (this.$route.query.type) { this.comName = this.$route.query.type }
  },
  methods: {
    // 注册方法
    accountNo () {
      this.comName = this.comName === 'Registered' ? 'Login' : 'Registered'
    }
  }
}
</script>

<style lang="less">
.home_bg {
  position: fixed;
  height: 100%;
  width: 100%;
  overflow-y: hidden;
  .bg_mark {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: rgba(0,0,0,0.3);
    z-index: 12;
  }
  .home_bg_image{
    width: 100%;
    height: 100%;
  img {
    width: 100%;
    height: 100%;
  }
}
.login_top {
  display: flex;
  justify-content: space-between;
  line-height: 42px;
  span {
    color: #fff;
    font-size: 12px;
    cursor: pointer;
  }
}
// 登录组件布局
.login {
  position: absolute;
  left: 50%;
  transform: translate(-50%, 0%);
  top: 0;
  z-index: 99
}
}

</style>
